<template>
  <div>
    <!-- inline:行内表单,代表一行可以放多个元素 -->
    <el-form :inline="true" class="demo-form-inline" :model="cForm">
      <el-form-item label="一级分类" >
        <el-select placeholder="请选择" v-model="cForm.category1ID" @change="handler1" :disabled="show">
          <el-option :label="c1.name" :value="c1.id" v-for="(c1,index) in list1" :key="c1.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="二级分类" >
        <el-select placeholder="请选择" v-model="cForm.category2ID" @change="handler2" :disabled="show">
          <el-option :label="c2.name" :value="c2.id" v-for="(c2,index) in list2" :key="c2.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="三级分类" >
        <el-select placeholder="请选择" v-model="cForm.category3ID" @change="handler3" :disabled="show">
          <el-option :label="c3.name" :value="c3.id" v-for="(c3,index) in list3" :key="c3.id"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'CateGorySelect',
  
  props:['show'],
  data() {
      return {
          //一级分类的数据
          list1:[],
          //二级分类的数
          list2:[],
          //三级分类的数据
          list3:[],
        //  收集一二三级分类id
        cForm:{
            category1ID:'',
            category2ID:'',
            category3ID:'',
        }
      }
  },
  //组件挂载完毕，发请求获取相应的一级分类数据
    mounted() {
        this.getCateGoryList();
    },
    methods: {
        // 获取一级分类的方法
       async getCateGoryList(){
         let result =   await this.$api.attr.reqCateGoryList();
         if (result.code == 200) {
             this.list1 = result.data;
         }
        },
        // 一级分类select的事件回调（当以一级分类的id发生变化时获取相应的二级分类数据）
       async handler1(){
           this.list2 = []
           this.list3 = []
           this.cForm.category2ID = ''
           this.cForm.category3ID = ''
            //解构一级分类的id
            let {category1ID} = this.cForm
            this.$emit('getCateGoryId',{categoryID:category1ID,level:1})
           let result = await this.$api.attr.reqCateGory2List(category1ID)
           if (result.code == 200) {
               this.list2 = result.data.slice(0,10)
           }
        },
        // 二级分类事件回调
        async handler2(){
            this.list3 = []
            this.cForm.category3ID = ''
            let {category2ID} = this.cForm
            this.$emit('getCateGoryId',{categoryID:category2ID,level:2})
            let result = await this.$api.attr.reqCateGory3List(category2ID)
            if(result.code == 200){
                this.list3 = result.data
            }
        },
        // 三级分类事件回调
        handler3(){
            let {category3ID} = this.cForm
            this.$emit('getCateGoryId',{categoryID:category3ID,level:3})
        }
    },
}
</script>

<style>
</style>